<template>
  <div>
    <div class="container">
      <el-form
        v-if="pageFlag == 'register'"
        ref="rgsForm"
        class="rgs-form"
        :model="rgsForm"
      >
        <div
          v-if="true"
          :style="{
            margin: '0 0 20px 0',
            color: 'rgba(0, 0, 0, 1)',
            textAlign: 'center',
            width: '100%',
            lineHeight: '44px',
            fontSize: '22px',
            height: 'auto',
          }"
          class="title"
        >
          校园访客预约管理系统注册
        </div>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <!-- <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            学号
          </div> -->
          <el-input
            v-model="ruleForm.xuehao"
            autocomplete="off"
            placeholder="学号"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            密码
          </div>
          <el-input
            v-model="ruleForm.mima"
            autocomplete="off"
            placeholder="密码"
            type="password"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            确认密码
          </div>
          <el-input
            v-model="ruleForm.mima2"
            autocomplete="off"
            placeholder="确认密码"
            type="password"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            姓名
          </div>
          <el-input
            v-model="ruleForm.xingming"
            autocomplete="off"
            placeholder="姓名"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            性别
          </div>
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option
              v-for="(item, index) in xueshengxingbieOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            邮箱
          </div>
          <el-input
            v-model="ruleForm.youxiang"
            autocomplete="off"
            placeholder="邮箱"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            手机号码
          </div>
          <el-input
            v-model="ruleForm.shoujihaoma"
            autocomplete="off"
            placeholder="手机号码"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'xuesheng'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            头像
          </div>
          <file-upload
            tip="点击上传头像"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''"
            @change="xueshengtouxiangUploadChange"
          ></file-upload>
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            工号
          </div>
          <el-input
            v-model="ruleForm.gonghao"
            autocomplete="off"
            placeholder="工号"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            密码
          </div>
          <el-input
            v-model="ruleForm.mima"
            autocomplete="off"
            placeholder="密码"
            type="password"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            确认密码
          </div>
          <el-input
            v-model="ruleForm.mima2"
            autocomplete="off"
            placeholder="确认密码"
            type="password"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            姓名
          </div>
          <el-input
            v-model="ruleForm.xingming"
            autocomplete="off"
            placeholder="姓名"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            性别
          </div>
          <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
            <el-option
              v-for="(item, index) in jiaoshixingbieOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            邮箱
          </div>
          <el-input
            v-model="ruleForm.youxiang"
            autocomplete="off"
            placeholder="邮箱"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            手机号码
          </div>
          <el-input
            v-model="ruleForm.shoujihaoma"
            autocomplete="off"
            placeholder="手机号码"
            type="text"
          />
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            职称
          </div>
          <el-select v-model="ruleForm.zhicheng" placeholder="请选择职称">
            <el-option
              v-for="(item, index) in jiaoshizhichengOptions"
              v-bind:key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :style="{
            width: '80%',
            padding: '0',
            margin: '0 auto 15px',
            height: 'auto',
          }"
          class="list-item"
          v-if="tableName == 'jiaoshi'"
        >
          <div
            v-if="false"
            :style="{
              width: '64px',
              lineHeight: '44px',
              fontSize: '14px',
              color: 'rgba(64, 158, 255, 1)',
            }"
            class="lable"
          >
            头像
          </div>
          <file-upload
            tip="点击上传头像"
            action="file/upload"
            :limit="3"
            :multiple="true"
            :fileUrls="ruleForm.touxiang ? ruleForm.touxiang : ''"
            @change="jiaoshitouxiangUploadChange"
          ></file-upload>
        </el-form-item>
        <button

          type="button"
          class="r-btn"
          @click="login()"
        >
          注册
        </button>
        <div
          :style="{
            cursor: 'pointer',
            padding: '0 10%',
            color: 'rgba(159, 159, 159, 1)',
            textAlign: 'center',
            display: 'inline-block',
            width: '100%',
            lineHeight: '1',
            fontSize: '12px',
            textDecoration: 'underline',
          }"
          class="r-login"
          @click="close()"
        >
          已有账号，直接登录
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        xingbie: '',
        xingbie: '',
        zhicheng: '',
      },

      pageFlag: '',
      tableName: '',
      rules: {},
      xueshengxingbieOptions: [],
      jiaoshixingbieOptions: [],
      jiaoshizhichengOptions: [],
    }
  },
  mounted() {
    this.pageFlag = this.$storage.get('pageFlag')
    let table = this.$storage.get('loginTable')
    this.tableName = table
    this.xueshengxingbieOptions = '男,女'.split(',')
    this.jiaoshixingbieOptions = '男,女'.split(',')
    this.jiaoshizhichengOptions = '高级讲师,讲师,助教'.split(',')
  },
  created() {},
  destroyed() {},
  methods: {
    // 获取uuid
    getUUID() {
      return new Date().getTime()
    },
    close() {
      this.$router.push({ path: '/login' })
    },
    xueshengtouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls
    },
    jiaoshitouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls
    },

    // 多级联动参数

    // 注册
    login() {
      var url = this.tableName + '/register'
      if (!this.ruleForm.xuehao && `xuesheng` == this.tableName) {
        this.$message.error(`学号不能为空`)
        return
      }

      if (!this.ruleForm.mima && `xuesheng` == this.tableName) {
        this.$message.error(`密码不能为空`)
        return
      }

      if (
        this.ruleForm.mima != this.ruleForm.mima2 &&
        `xuesheng` == this.tableName
      ) {
        this.$message.error(`两次密码输入不一致`)
        return
      }
      if (!this.ruleForm.xingming && `xuesheng` == this.tableName) {
        this.$message.error(`姓名不能为空`)
        return
      }

      if (
        `xuesheng` == this.tableName &&
        this.ruleForm.youxiang &&
        !this.$validate.isEmail(this.ruleForm.youxiang)
      ) {
        this.$message.error(`邮箱应输入邮件格式`)
        return
      }

      if (
        `xuesheng` == this.tableName &&
        this.ruleForm.shoujihaoma &&
        !this.$validate.isMobile(this.ruleForm.shoujihaoma)
      ) {
        this.$message.error(`手机号码应输入手机格式`)
        return
      }

      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(
          new RegExp(this.$base.url, 'g'),
          ''
        )
      }

      if (!this.ruleForm.gonghao && `jiaoshi` == this.tableName) {
        this.$message.error(`工号不能为空`)
        return
      }

      if (!this.ruleForm.mima && `jiaoshi` == this.tableName) {
        this.$message.error(`密码不能为空`)
        return
      }

      if (
        this.ruleForm.mima != this.ruleForm.mima2 &&
        `jiaoshi` == this.tableName
      ) {
        this.$message.error(`两次密码输入不一致`)
        return
      }
      if (!this.ruleForm.xingming && `jiaoshi` == this.tableName) {
        this.$message.error(`姓名不能为空`)
        return
      }

      if (
        `jiaoshi` == this.tableName &&
        this.ruleForm.youxiang &&
        !this.$validate.isEmail(this.ruleForm.youxiang)
      ) {
        this.$message.error(`邮箱应输入邮件格式`)
        return
      }

      if (
        `jiaoshi` == this.tableName &&
        this.ruleForm.shoujihaoma &&
        !this.$validate.isMobile(this.ruleForm.shoujihaoma)
      ) {
        this.$message.error(`手机号码应输入手机格式`)
        return
      }

      if (!this.ruleForm.zhicheng && `jiaoshi` == this.tableName) {
        this.$message.error(`职称不能为空`)
        return
      }

      if (this.ruleForm.touxiang != null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(
          new RegExp(this.$base.url, 'g'),
          ''
        )
      }

      this.$http({
        url: url,
        method: 'post',
        data: this.ruleForm,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '注册成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.$router.replace({ path: '/login' })
            },
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  // background: url(http://codegen.caihongy.cn/20220804/7b6725db49ff41fcbf4d90334e06cd1c.png);
  background: url(../assets/img/caochang.jpg);
  min-width: none;
  height: 100vh;
  align-items: center;
  display: flex;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  justify-content: center;

  .r-btn {
    border: 0;
    cursor: pointer;
    padding: 0 10px;
    margin: 20px auto 15px;
    outline: none;
    color: #fff;
    border-radius: 8px;
    background: rgba(59, 152, 240, 0.85);
    display: block;
    width: 80%;
    font-size: 16px;
    height: 44px;
  }

  .rgs-form {
    padding: 30px;
    // box-shadow: 20px 20px 0px 20px rgba(0,0,0,0.3020);
    margin: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.7);
    width: 430px;
    height: auto;
  }
  .el-date-editor.el-input {
    width: 100%;
  }

  .rgs-form .el-input /deep/ .el-input__inner {
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
    outline: none;
    color: #333;
    width: 100%;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-select /deep/ .el-input__inner {
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
    outline: none;
    color: #333;
    width: 295px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-date-editor /deep/ .el-input__inner {
    border: 0;
    border-radius: 8px;
    padding: 0 10px 0 30px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
    outline: none;
    color: #333;
    width: 288px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-date-editor /deep/ .el-input__inner {
    border: 0;
    border-radius: 8px;
    padding: 0 10px 0 30px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
    outline: none;
    color: #333;
    width: 288px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form /deep/ .el-upload--picture-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    line-height: initial;
    vertical-align: middle;
  }

  .rgs-form /deep/ .upload .upload-img {
    border: 1px dashed rgba(0, 0, 0, 0.302);
    cursor: pointer;
    border-radius: 8px;
    color: #333;
    width: 100px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }

  .rgs-form /deep/ .el-upload-list .el-upload-list__item {
    border: 1px dashed rgba(0, 0, 0, 0.302);
    cursor: pointer;
    border-radius: 8px;
    color: #333;
    width: 100px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }

  .rgs-form /deep/ .el-upload .el-icon-plus {
    border: 1px dashed rgba(0, 0, 0, 0.302);
    cursor: pointer;
    border-radius: 8px;
    color: #333;
    width: 100px;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    height: 100px;
  }
}
</style>
